<template>
  <div id="roleAply">
    <a-form :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
      <a-form-item field="realName" label="realName">
        <a-input
          v-model="form.realName"
          placeholder="please enter your realName"
        />
      </a-form-item>
      <a-form-item field="code" label="request code">
        <a-input v-model="form.code" placeholder="please enter request code" />
      </a-form-item>
      <a-form-item field="role" label="role">
        <a-select
          class="select"
          :style="{ width: '600px' }"
          v-model="form.role"
          placeholder="   Please select ..."
          allow-clear
        >
          <a-option>teacher</a-option>
          <a-option>parent</a-option>
          <a-option disabled>Admin</a-option>
        </a-select>
      </a-form-item>

      <a-form-item style="padding-top: 25px">
        <a-button html-type="roleAply">Apply</a-button>
      </a-form-item>
    </a-form>
    {{ form }}
  </div>
</template>
      
<script>
import { reactive } from "vue";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();

export default {
  setup() {
    const form = reactive({
      realName: "",
      code: "",
      role: "",
    });
    return {
      form,
    };
  },
  methods:{
    handleSubmit(){
      if(this.form.realName==""||this.form.role==""){
        alert("用户名、选择申请的身份不能为空");
      }
      if(this.form.realName!==this.$store.state.user.loginUser.userName){
        alert("输入的用户名与您登录的用户名不一致");
      }else{
        axios
        .post("/submit/submitRole",{
          userID:this.$store.state.user.loginUser.userId,
          subCode:this.form.code,
          subRole:this.form.role,
          subName:this.$store.state.user.loginUser.userName,
        })
        .then((response)=>{
          if(response.data){
            alert("身份申请成功，等待管理员审核通过")
          }else{
            alert("身份请求发送失败")
          }
        })
        .catch(function (error) {
            console.log(error);
          });
      }
    }
  },
};
</script>
  
  <style>
#roleAply {
  padding-top: 100px;
  padding-left: 400px;
}
#roleAply .select {
  padding-left: 0px;
}
</style>